<template>

<div align="center">

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="总售出数量占比" name="first">
      <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
    </el-tab-pane>
    <el-tab-pane label="近半年售出数量占比" name="second">
      <div id="myChart_sixMonth" :style="{width: '800px', height: '600px'}"></div>
    </el-tab-pane>
    <el-tab-pane label="近30天售出数量占比" name="third">
      <div id="myChart_nowMonth" :style="{width: '800px', height: '600px'}"></div>
    </el-tab-pane>
    <el-tab-pane label="今日售出数量占比" name="fourth">
      <div id="myChart_today" :style="{width: '800px', height: '600px'}"></div>
    </el-tab-pane>
  </el-tabs>


</div>


</template>

<script>
import request from "../../utils/request";

export default {
  data(){
    return {
     name:[],
      count:[],
      activeName:'first',


    };
  },
  mounted() {
    this.Sales()
    this.Sales_nowMonth(),
    this.Sales_sixMonth(),
    this.Sales_today()
  },

  name: "Statistics2",



  methods:{


    Sales(){

      let myChart = this.$root.echarts.init(document.getElementById('myChart'))

      let  option = {

              title: {
                text: '各菜品销售数量占比',
                subtext: '单位（个）',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    // { value: 1048, name: 'Search Engine' },
                    // { value: 735, name: 'Direct' },
                    // { value: 580, name: 'Email' },
                    // { value: 484, name: 'Union Ads' },
                    // { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

      request.get("/Statistics/selectInfo2").then(res => {

        res.data.forEach(item => {
          this.name.push(item.key)
          this.count.push(item.value)
          option.series[0].data.push({name: item.key, value: item.value})
        // option.dataset.source.push([22,323,3332,3223,331])
        //   option.dataset.source.push([55,33,888,546,113])
        //
        //   option.series[0].data.push({name: item.key, value: item.value})
        })

        // 绘制图表
        myChart.setOption(option);
      })




    },
    Sales_sixMonth(){

      let myChart = this.$root.echarts.init(document.getElementById('myChart_sixMonth'))

      let  option = {

        title: {
          text: '各菜品销售数量占比',
          subtext: '单位（个）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      request.get("/Statistics/selectInfo2_myChart_sixMonth").then(res => {

        res.data.forEach(item => {
          this.name.push(item.key)
          this.count.push(item.value)
          option.series[0].data.push({name: item.key, value: item.value})
          // option.dataset.source.push([22,323,3332,3223,331])
          //   option.dataset.source.push([55,33,888,546,113])
          //
          //   option.series[0].data.push({name: item.key, value: item.value})
        })

        // 绘制图表
        myChart.setOption(option);
      })




    },
    Sales_nowMonth(){

      let myChart = this.$root.echarts.init(document.getElementById('myChart_nowMonth'))

      let  option = {

        title: {
          text: '各菜品销售数量占比',
          subtext: '单位（个）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      request.get("/Statistics/selectInfo2_nowMonth").then(res => {

        res.data.forEach(item => {
          this.name.push(item.key)
          this.count.push(item.value)
          option.series[0].data.push({name: item.key, value: item.value})
          // option.dataset.source.push([22,323,3332,3223,331])
          //   option.dataset.source.push([55,33,888,546,113])
          //
          //   option.series[0].data.push({name: item.key, value: item.value})
        })

        // 绘制图表
        myChart.setOption(option);
      })




    },
    Sales_today(){

      let myChart = this.$root.echarts.init(document.getElementById('myChart_today'))

      let  option = {

        title: {
          text: '各菜品销售数量占比',
          subtext: '单位（个）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      request.get("/Statistics/selectInfo2_today").then(res => {

        res.data.forEach(item => {
          this.name.push(item.key)
          this.count.push(item.value)
          option.series[0].data.push({name: item.key, value: item.value})
          // option.dataset.source.push([22,323,3332,3223,331])
          //   option.dataset.source.push([55,33,888,546,113])
          //
          //   option.series[0].data.push({name: item.key, value: item.value})
        })

        // 绘制图表
        myChart.setOption(option);
      })




    },


  },
}

</script>



<style scoped>

</style>